/// <reference path="index.d.ts" />


import * as React from 'react'
import { View, Text } from "@tarojs/components";
import './index.scss'

//    AlertTextareaRef: React.RefObject<AlertTextareaCurrentProp>,

export default React.forwardRef((props: Partial<AlertTextareaProp>, ref) => {
    const {
        onComplete,
    } = props
    const [keyProp, setKeyProp] = React.useState<AlertTextareaKeyProp>({
        key: -1,
        placeholder: '回复帖子:'
    })
    const [content, setContent] = React.useState<string>()

    React.useImperativeHandle(ref, () => ({
        show: (target?: AlertTextareaKeyProp) => {
            if (target && target.key != keyProp.key) {
                setContent('')
                setKeyProp(target)
            }
            containerClassRef.current = 'alert-container show'
            containerRef.current.className = 'alert-container show'
            // alertWarpRef.current.style.transform = `translateY(-${alertWarpRef?.current?.clientHeight - 100}px)`
            alertWarpRef.current.style.transform = `translateY(-80%)`
            alertWarpRef.current.style.transition = 'transform 0.35s ease-in'
        },
        hide
    }), [content])


    const hide = () => {
        alertWarpRef.current.style.transform = 'translateY(0px)'
        alertWarpRef.current.style.transition = 'transform 0.15s ease-out'
        setTimeout(() => {
            containerClassRef.current = 'alert-container hide'
            containerRef.current.className = 'alert-container hide'
        }, 100)
    }


    const containerRef = React.useRef<any>()
    const containerClassRef = React.useRef<string>('alert-container hide')
    const alertWarpRef = React.useRef<any>()
    const textareaRef = React.useRef<any>()



    React.useEffect(() => {

    }, [])



    return (
        <View className={containerClassRef.current}
            ref={containerRef}
            onClick={e => {
                hide()
            }}>

            <View className='alert-warp at' style={{ borderRadius: '6px 6px 0 0' }} ref={alertWarpRef}
                onClick={e => e.stopPropagation()}
            >
                <View className='alert-warp inputContainer' >
                    <textarea
                        className='alert-warp input'
                        ref={textareaRef}
                        placeholder={keyProp.placeholder}
                        maxLength={200}
                        value={content}
                        onChange={e => {
                            setContent(textareaRef.current.value)
                        }}
                    />
                </View>
                <View className='alert-warp number'>
                    <Text style={{ fontSize: '14px', color: '#666666' }}>{content?.length || 0}/200</Text>
                </View>
                <View className='alert-warp button' onClick={e => {
                    hide()
                    setTimeout(() => {
                        onComplete && onComplete({
                            value: content,
                            key: keyProp.key,
                            placeholder: keyProp.placeholder
                        })
                        setContent('')
                    }, 150);
                    e.stopPropagation()
                }}>
                    <Text style={{ fontSize: '14px', color: 'white' }}>发送</Text>
                </View>
            </View>

        </View>
    )
})





// const Component = (props: Partial<Prop>, ref) => {
//     const {
//         onComplete,
//     } = props
//     const [keyProp, setKeyProp] = React.useState<AlertTextareaKeyProp>({
//         key: -1,
//         placeholder: '回复帖子:'
//     })
//     const [content, setContent] = React.useState<string>()

//     React.useImperativeHandle(ref, () => ({
//         show: (target?: AlertTextareaKeyProp) => {
//             if (target && target.key != keyProp.key) {
//                 setContent('')
//                 setKeyProp(target)
//             }
//             containerClassRef.current = 'alert-container show'
//             containerRef.current.className = 'alert-container show'
//             // alertWarpRef.current.style.transform = `translateY(-${alertWarpRef?.current?.clientHeight - 100}px)`
//             alertWarpRef.current.style.transform = `translateY(-80%)`
//             alertWarpRef.current.style.transition = 'transform 0.35s ease-in'
//         },
//         hide
//     }), [content])


//     const hide = () => {
//         alertWarpRef.current.style.transform = 'translateY(0px)'
//         alertWarpRef.current.style.transition = 'transform 0.15s ease-out'
//         setTimeout(() => {
//             containerClassRef.current = 'alert-container hide'
//             containerRef.current.className = 'alert-container hide'
//         }, 100)
//     }


//     const containerRef = React.useRef<any>()
//     const containerClassRef = React.useRef<string>('alert-container hide')
//     const alertWarpRef = React.useRef<any>()
//     const textareaRef = React.useRef<any>()



//     React.useEffect(() => {

//     }, [])



//     return (
//         <View className={containerClassRef.current}
//             ref={containerRef}
//             onClick={e => {
//                 hide()
//             }}>

//             <View className='alert-warp at' style={{ borderRadius: '6px 6px 0 0' }} ref={alertWarpRef}
//                 onClick={e => e.stopPropagation()}
//             >
//                 <View className='alert-warp inputContainer' >
//                     <textarea
//                         className='alert-warp input'
//                         ref={textareaRef}
//                         placeholder={keyProp.placeholder}
//                         maxLength={200}
//                         value={content}
//                         onChange={e => {
//                             setContent(textareaRef.current.value)
//                         }}
//                     />
//                 </View>
//                 <View className='alert-warp number'>
//                     <Text style={{ fontSize: '14px', color: '#666666' }}>{content?.length || 0}/200</Text>
//                 </View>
//                 <View className='alert-warp button' onClick={e => {
//                     hide()
//                     setTimeout(() => {
//                         onComplete && onComplete({
//                             value: content,
//                             key: keyProp.key,
//                             placeholder: keyProp.placeholder
//                         })
//                         setContent('')
//                     }, 150);
//                     e.stopPropagation()
//                 }}>
//                     <Text style={{ fontSize: '14px', color: 'white' }}>发送</Text>
//                 </View>
//             </View>

//         </View>
//     )
// }

// export default  React.forwardRef((props, ref) => <Component {...props} ref={ref} />)
/**
 * 参考
 * https://segmentfault.com/a/1190000017463191
 */




